<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>geolocation</title> 
  <style>
    #map_canvas{
      width:400px;
      height:300px;
      border:1px solid blue;
      padding:100px;
    }
  </style>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>

<body>
  <h1>Map Demo using geo location</h1>
  <div id="map_canvas"></div>
  <script>
    var map_canvas = document.getElementById("map_canvas");
    function success(position){
  
       var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

       var myOptions = {
       zoom: 15,
       center: latlng,
       mapTypeControl: false,
       navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
       mapTypeId: google.maps.MapTypeId.ROADMAP
  };
       var map = new google.maps.Map(map_canvas, myOptions);
  
       var marker = new google.maps.Marker({
         position: latlng, 
         map: map, 
         title:"You are here!"
       });
    }
    function error(errorMsg){
      map_canvas.innerHTML="<div style='color:red'>"+errorMsg+"</div>";
    }
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error);
    } else {
      error('not supported');
    }
  </script>
</body>
</html>
